<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Trend Charts</title>

    <script src="https://cdn.jsdelivr.net/npm/frappe-charts@1.6.1/dist/frappe-charts.min.umd.js"></script>

</head>

<body>

    <div>
        <div>
            <h6>饼状图</h6>
            <div id="chart-trends"></div>
        </div>
    </div>

    <script>
        let trends_data = {
            labels: ['美国', '中国', '欧盟', '沙特', '俄罗斯', '印度', '法国', '英国', '日本', '其他国家总和'],
            datasets: [
                {
                    values: [610, 235, 200, 69.5, 66.3, 63.9, 57.8, 47.2, 45.4, 281.9]
                }
            ]
        };
    
        let plotChartArgs = {
            title: "中国GDP历年成长情形(单位:百万美元)",
            data: trends_data,
            type: 'pie',
            height: 300,
            colors: ['#ff00ff'],
            lineOptions: {
                hideDots: 0,
                heatline: 0,
                regionFill: 1,
                hideLine: 0
            },
            axisOptions: {
                xAxisMode: 'tick',
                yAxisMode: 'span',
                xIsSeries: 1
            }
        };
    
        let chart = new frappe.Chart("#chart-trends", plotChartArgs);
        chart.render();
    </script>
</body>
</html>
